<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>更多景点</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<style type="text/css">
			.tourmore_main {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				/*padding-bottom: 55px;*/
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-left: 6px;
				padding-top: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			.tourmain_main img {
				width: 100%;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 8px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			.app_head_right select {
				border: none;
			}
			
			.tourmain_mid ul li {
				height: 80px;
				border-bottom: 1px solid #DEDEDE;
				padding: 8px;
			}
			
			.tourmain_mid ul li h2 {
				height: 60%;
				line-height: 40px;
				color: #017FD6;
				font-weight: bold;
				font-size: 1.3em;
			}
			
			.tourmain_mid ul li p {
				color: #666666;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 内容超出宽度时隐藏超出部分的内容 */
				text-overflow: ellipsis;
				/* 当对象内文本溢出时显示省略标记 */
			}
			.tourmain_mid{
				padding-top: 70px;
			}
		</style>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>
	</head>

	<body ontouchstart>
		<div class="tourmore_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="tour.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">更多景点</p>
				</div>
				<!--<div class="app_head_right">
				</div>-->
			</div>
			<div class="tourmain_mid" id="tourmain_mid">
				<div id="l-map" style="display: none"></div>
				<div id="r-result" style="display: none;"></div>
				<ul>
					<!--DOM添加至列表-->
				</ul>
			</div>
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 百度地图API功能
			var map = new BMap.Map("l-map");
			map.centerAndZoom("吉林省长春市", 17);

			var options = {
				onSearchComplete: function(results) {
					// 判断状态是否正确
					if(local.getStatus() == BMAP_STATUS_SUCCESS) {
						var s = [];
						var ul = $('<ul></ul>');
						$("#tourmain_mid").append(ul);
						for(var i = 0; i < results.getCurrentNumPois(); i++) {
							s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
							var li = $('<li></li>');
							var h = $('<h2>' + results.getPoi(i).title + '</h2>');
							var p = $('<p>' + results.getPoi(i).address + '</p>');
							$(ul).append(li);
							$(li).append(h, p);
						}
						document.getElementById("r-result").innerHTML = s.join("<br/>");
//						console.log(results.getPoi(1).title);
					}
				}
			};
			var local = new BMap.LocalSearch(map, options);
			local.search("景点");
		</script>
	</body>

</html>